<template>
  <div style="width: 100%;position: absolute;top: 50%;transform: translate(0, -50%);">
    <el-row type="flex" class="row-bg box" justify="space-around">
      <el-col :span="24" style="text-align: center; margin-bottom: 20px">
        <div>
          <el-image
            style="box-shadow: 0 5px 8px rgba(210,210,210,0.3),0 -5px 8px rgba(210,210,210,0.3),5px 0 8px rgba(210,210,210,0.3),-5px 0 8px rgba(210,210,210,0.3);"
            class="h-250px w-250px"
            :src="qrCodeUrl"
            preview-teleported
            fit="cover"
          />
        </div>
      </el-col>
      <el-col :span="24" style="text-align: center">
        <el-button type="primary" @click="refreshQrCode"><Icon icon="ep:refresh" class="mr-5px" />刷新二维码</el-button>
        <el-divider direction="vertical"/>
        <a style="font-size: 14px; color: #2d8cf0" :href="qrCodeUrl" target="_blank">
          <el-button type="success"><Icon icon="ep:download" class="mr-5px" />下载二维码</el-button>
        </a>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { UserExtendApi } from '@/api/business/userextend'

/** 用户授权维护 列表 */
defineOptions({ name: 'UserAuthQrCode' })

const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

let qrCodeUrl = ref()
/** 查询列表 */
const getQrCode = async () => {
  qrCodeUrl.value = await UserExtendApi.getQrCode()
}
/** 查询列表 */
const refreshQrCode = async () => {
  qrCodeUrl.value = await UserExtendApi.refreshQrCode()
}

/** 初始化 **/
onMounted(() => {
  getQrCode()
})
</script>
